document.addEventListener('DOMContentLoaded', function() {
    // 定义视图类型 
    window.viewTypes = ["UIView", "UILabel", "UIButton", "UIImageView", "UITextFeield", "UISwitch", "UISlider"];
    
    // 添加子视图按钮点击事件
    document.getElementById('addSubview').addEventListener('click', function() {
        addSubview();
    });
    
    // 生成JSON按钮点击事件
    document.getElementById('generateBtn').addEventListener('click', function() {
        generateJSON();
    });
    
    // 下载JSON按钮点击事件
    document.getElementById('downloadJson').addEventListener('click', function() {
        downloadJson();
    });
    
    // 添加生成Swift代码按钮点击事件
    document.getElementById('generateSwift').addEventListener('click', function() {
        generateSwiftCode();
    });
    
    // 生成Swift代码函数
    function generateSwiftCode() {
        // 获取当前JSON数据
        const jsonData = collectFormData();
        
        // 先保存JSON文件
        fetch('/api/create_json', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(jsonData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // JSON文件创建成功后，调用生成Swift代码的API
                return fetch('/api/generate_swift', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        'json_path': data.path
                    })
                });
            } else {
                throw new Error(data.message);
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Swift代码生成成功：' + data.path);
            } else {
                alert('Swift代码生成失败：' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败：' + error.message);
        });
    }
    
    // 初始化函数
    function init() {
        // 初始化视图类型选择器
        initViewTypeSelectors();
        
        // 其他初始化代码...
    }
    
    // 初始化视图类型选择器
    function initViewTypeSelectors() {
        // 获取所有视图类型选择器
        const viewTypeSelects = document.querySelectorAll('.view-type:not(.initialized)');
        
        // 为每个选择器填充选项
        viewTypeSelects.forEach(select => {
            // 清空现有选项
            select.innerHTML = '';
            
            // 添加默认选项
            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = '请选择视图类型';
            defaultOption.disabled = true;
            defaultOption.selected = true;
            select.appendChild(defaultOption);
            
            // 添加视图类型选项
            window.viewTypes.forEach(type => {
                const option = document.createElement('option');
                option.value = type;
                option.textContent = type;
                select.appendChild(option);
            });
            
            // 添加change事件监听器
            select.addEventListener('change', function() {
                // 获取当前子视图容器
                const subviewItem = this.closest('.subview-item');
                
                // 显示/隐藏对应的特有属性
                toggleSpecificProps(subviewItem, this.value);
                
                // 更新JSON预览
                updateJSONPreview();
            });
            
            // 标记为已初始化
            select.classList.add('initialized');
        });
    }
    
    // 切换显示特定视图类型的属性
    function toggleSpecificProps(subviewItem, viewType) {
        // 获取所有特有属性容器
        const labelProps = subviewItem.querySelector('.label-props');
        const buttonProps = subviewItem.querySelector('.button-props');
        const imageViewProps = subviewItem.querySelector('.imageview-props');
        
        // 先隐藏所有特有属性
        labelProps.classList.add('d-none');
        buttonProps.classList.add('d-none');
        imageViewProps.classList.add('d-none');
        
        // 根据视图类型显示对应的特有属性
        switch(viewType) {
            case 'UILabel':
                labelProps.classList.remove('d-none');
                break;
            case 'UIButton':
                buttonProps.classList.remove('d-none');
                break;
            case 'UIImageView':
                imageViewProps.classList.remove('d-none');
                break;
            // 可以根据需要添加其他视图类型的处理
        }
    }
    
    // 添加子视图函数
    function addSubview() {
        // 获取子视图模板
        const template = document.getElementById('subviewTemplate');
        const subviewsContainer = document.getElementById('subviewsContainer');
        
        // 克隆模板
        const subviewNode = document.importNode(template.content, true);
        
        // 设置折叠按钮的目标
        const propertiesBtn = subviewNode.querySelector('.toggle-properties');
        const propertiesContainer = subviewNode.querySelector('.properties-container');
        const constraintsBtn = subviewNode.querySelector('.toggle-constraints');
        const constraintsContainer = subviewNode.querySelector('.constraints-container');
        
        // 生成唯一ID
        const uniqueId = 'props-' + Date.now();
        const constraintsId = 'constraints-' + Date.now();
        
        // 设置属性折叠按钮
        propertiesContainer.id = uniqueId;
        propertiesBtn.setAttribute('data-bs-target', '#' + uniqueId);
        
        // 设置约束折叠按钮
        constraintsContainer.id = constraintsId;
        constraintsBtn.setAttribute('data-bs-target', '#' + constraintsId);
        
        // 添加删除按钮事件
        const removeBtn = subviewNode.querySelector('.remove-subview');
        removeBtn.addEventListener('click', function() {
            this.closest('.subview-item').remove();
            updateJSONPreview();
        });
        
        // 添加透明度滑块事件
        const alphaSlider = subviewNode.querySelector('.prop-alpha');
        const alphaValue = subviewNode.querySelector('.alpha-value');
        alphaSlider.addEventListener('input', function() {
            alphaValue.textContent = this.value;
            updateJSONPreview();
        });
        
        // 添加保存按钮事件
        const saveBtn = subviewNode.querySelector('.save-subview');
        saveBtn.addEventListener('click', function() {
            updateJSONPreview();
            // 显示保存成功提示
            const saveMessage = this.nextElementSibling;
            saveMessage.classList.remove('d-none');
            setTimeout(() => {
                saveMessage.classList.add('d-none');
            }, 2000);
        });
        
        // 将子视图添加到容器
        subviewsContainer.appendChild(subviewNode);
        
        // 初始化新添加的视图类型选择器
        initViewTypeSelectors();
        
        // 为新添加的所有输入元素添加change事件
        const inputs = subviewNode.querySelectorAll('input, select');
        inputs.forEach(input => {
            input.addEventListener('change', function() {
                // 当输入变化时，不自动更新JSON预览，等待用户点击保存按钮
                // 移除自动更新逻辑
            });
            input.addEventListener('input', function() {
                if (this.type === 'range') {
                    // 对于滑块，仍然实时更新显示值，但不更新JSON预览
                    if (this.classList.contains('prop-alpha')) {
                        const valueDisplay = this.nextElementSibling;
                        valueDisplay.textContent = this.value;
                    }
                }
            });
        });
        
        // 添加约束复选框事件
        const constraintCheckboxes = subviewNode.querySelectorAll('.constraint-top-enabled, .constraint-leading-enabled, .constraint-trailing-enabled, .constraint-bottom-enabled, .constraint-width-enabled, .constraint-height-enabled');
        constraintCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                // 获取对应的输入框
                const inputName = this.className.replace('form-check-input ', '').replace('-enabled', '');
                const input = this.closest('.mb-2').querySelector('.' + inputName);
                
                // 启用/禁用输入框
                input.disabled = !this.checked;
                
                // 更新JSON预览
                updateJSONPreview();
            });
            
            // 初始状态下禁用输入框
            const inputName = checkbox.className.replace('form-check-input ', '').replace('-enabled', '');
            const input = checkbox.closest('.mb-2').querySelector('.' + inputName);
            input.disabled = true;
        });
    }
    
    // 更新JSON预览
    function updateJSONPreview() {
        const jsonData = collectFormData();
        const jsonPreview = document.getElementById('jsonPreview');
        const previewContainer = jsonPreview.parentElement;
        
        jsonPreview.textContent = JSON.stringify(jsonData, null, 2);
        
        // 确保预览区域能够显示完整内容
        jsonPreview.style.maxHeight = 'none';
        jsonPreview.style.overflow = 'auto';
        jsonPreview.style.whiteSpace = 'pre-wrap';
        jsonPreview.style.wordBreak = 'break-word';
        
        // 如果有父容器，也确保它不限制显示
        if (previewContainer && previewContainer.classList.contains('json-preview-container')) {
            previewContainer.style.maxHeight = 'none';
            previewContainer.style.overflow = 'auto';
        }
    }
    
    // 下载JSON函数
    function downloadJson() {
        // 获取JSON数据
        const jsonData = collectFormData();
        
        // 将JSON数据转换为字符串
        const jsonString = JSON.stringify(jsonData, null, 2);
        
        // 创建Blob对象
        const blob = new Blob([jsonString], { type: 'application/json' });
        
        // 创建URL
        const url = URL.createObjectURL(blob);
        
        // 创建下载链接
        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        
        // 设置文件名（使用用户输入的文件名或默认名称）
        const fileName = document.getElementById('fileName').value || 'ui_config';
        downloadLink.download = fileName + '.json';
        
        // 添加到文档并触发点击
        document.body.appendChild(downloadLink);
        downloadLink.click();
        
        // 清理
        document.body.removeChild(downloadLink);
        URL.revokeObjectURL(url);
    }
    
    // 收集表单数据
    function collectFormData() {
        // 基本配置
        const jsonData = {
            classType: document.getElementById('classType').value,
            module: document.getElementById('module').value,
            prefix: document.getElementById('prefix').value,
            classDesc: document.getElementById('classDesc').value,
            fileName: document.getElementById('fileName').value,
            subviews: []
        };
        
        // 子视图配置
        const subviewItems = document.querySelectorAll('.subview-item');
        subviewItems.forEach(item => {
            const viewType = item.querySelector('.view-type').value;
            if (!viewType) return; // 跳过未选择类型的子视图
            
            // 创建子视图基本结构
            const subview = {
                viewType: viewType,
                desc: item.querySelector('.view-desc').value,
                properties: {},
                constraints: {}
            };
            
            // 添加非默认属性 - 通用属性
            const backgroundColor = item.querySelector('.prop-backgroundColor').value;
            if (backgroundColor && backgroundColor.trim() !== '') {
                subview.properties.backgroundColor = backgroundColor;
            }
            
            const alpha = parseFloat(item.querySelector('.prop-alpha').value);
            if (alpha !== 1.0) {
                subview.properties.alpha = alpha;
            }
            
            const isHidden = item.querySelector('.prop-isHidden').checked;
            if (isHidden) {
                subview.properties.isHidden = isHidden;
            }
            
            const clipsToBounds = item.querySelector('.prop-clipsToBounds').checked;
            if (!clipsToBounds) { // 默认为true，只有当为false时才添加
                subview.properties.clipsToBounds = clipsToBounds;
            }
            
            const tag = parseInt(item.querySelector('.prop-tag').value);
            if (tag !== 0) { // 默认为0，只有当不为0时才添加
                subview.properties.tag = tag;
            }
            
            const isUserInteractionEnabled = item.querySelector('.prop-isUserInteractionEnabled').checked;
            if (!isUserInteractionEnabled) { // 默认为true，只有当为false时才添加
                subview.properties.isUserInteractionEnabled = isUserInteractionEnabled;
            }
            
            const cornerRadius = parseInt(item.querySelector('.prop-cornerRadius').value);
            if (cornerRadius !== 0) {
                subview.properties.cornerRadius = cornerRadius;
            }
            
            const borderWidth = parseInt(item.querySelector('.prop-borderWidth').value);
            if (borderWidth !== 0) {
                subview.properties.borderWidth = borderWidth;
            }
            
            const borderColor = item.querySelector('.prop-borderColor').value;
            if (borderColor && borderColor.trim() !== '') {
                subview.properties.borderColor = borderColor;
            }
            
            const contentMode = item.querySelector('.prop-contentMode').value;
            if (contentMode && contentMode !== 'scaleAspectFit') { // 假设scaleAspectFit是默认值
                subview.properties.contentMode = contentMode;
            }
            
            // 添加选中的约束
            if (item.querySelector('.constraint-top-enabled').checked) {
                subview.constraints.top = parseInt(item.querySelector('.constraint-top').value);
            }
            
            if (item.querySelector('.constraint-leading-enabled').checked) {
                subview.constraints.leading = parseInt(item.querySelector('.constraint-leading').value);
            }
            
            if (item.querySelector('.constraint-trailing-enabled').checked) {
                subview.constraints.trailing = parseInt(item.querySelector('.constraint-trailing').value);
            }
            
            if (item.querySelector('.constraint-bottom-enabled').checked) {
                subview.constraints.bottom = parseInt(item.querySelector('.constraint-bottom').value);
            }
            
            if (item.querySelector('.constraint-width-enabled').checked) {
                subview.constraints.width = parseInt(item.querySelector('.constraint-width').value);
            }
            
            if (item.querySelector('.constraint-height-enabled').checked) {
                subview.constraints.height = parseInt(item.querySelector('.constraint-height').value);
            }
            
            // 添加特定视图类型的非默认属性
            switch(viewType) {
                case 'UILabel':
                    const labelText = item.querySelector('.prop-text').value;
                    if (labelText && labelText !== '标签') {
                        subview.properties.text = labelText;
                    }
                    
                    const textColor = item.querySelector('.prop-textColor').value;
                    if (textColor && textColor.trim() !== '') {
                        subview.properties.textColor = textColor;
                    }
                    
                    const labelFontSize = parseInt(item.querySelector('.label-props .prop-fontSize').value);
                    if (labelFontSize !== 16) { // 假设16是默认值
                        subview.properties.fontSize = labelFontSize;
                    }
                    
                    const labelFontWeight = item.querySelector('.label-props .prop-fontWeight').value;
                    if (labelFontWeight && labelFontWeight !== 'regular') { // 假设regular是默认值
                        subview.properties.fontWeight = labelFontWeight;
                    }
                    
                    const numberOfLines = parseInt(item.querySelector('.prop-numberOfLines').value);
                    if (numberOfLines !== 1) { // 假设1是默认值
                        subview.properties.numberOfLines = numberOfLines;
                    }
                    
                    const textAlignment = item.querySelector('.prop-textAlignment').value;
                    if (textAlignment && textAlignment !== 'left') { // 假设left是默认值
                        subview.properties.textAlignment = textAlignment;
                    }
                    break;
                    
                case 'UIButton':
                    const buttonTitle = item.querySelector('.prop-title').value;
                    if (buttonTitle && buttonTitle !== '按钮') {
                        subview.properties.title = buttonTitle;
                    }
                    
                    const titleColor = item.querySelector('.prop-titleColor').value;
                    if (titleColor && titleColor.trim() !== '') {
                        subview.properties.titleColor = titleColor;
                    }
                    
                    const buttonFontSize = parseInt(item.querySelector('.button-props .prop-fontSize').value);
                    if (buttonFontSize !== 16) { // 假设16是默认值
                        subview.properties.fontSize = buttonFontSize;
                    }
                    
                    const buttonFontWeight = item.querySelector('.button-props .prop-fontWeight').value;
                    if (buttonFontWeight && buttonFontWeight !== 'medium') { // 假设medium是默认值
                        subview.properties.fontWeight = buttonFontWeight;
                    }
                    
                    const action = item.querySelector('.prop-action').value;
                    if (action && action !== 'buttonTapped') { // 假设buttonTapped是默认值
                        subview.properties.action = action;
                    }
                    break;
                    
                case 'UIImageView':
                    const image = item.querySelector('.prop-image').value;
                    if (image) { // 图片名称没有默认值，只要有值就添加
                        subview.properties.image = image;
                    }
                    break;
            }
            
            // 如果properties或constraints为空对象，则使用默认空对象
            if (Object.keys(subview.properties).length === 0) {
                subview.properties = {};
            }
            
            if (Object.keys(subview.constraints).length === 0) {
                subview.constraints = {};
            }
            
            jsonData.subviews.push(subview);
        });
        
        return jsonData;
    }
    
    // 生成JSON文件
    function generateJSON() {
        const jsonData = collectFormData();
        
        // 发送到服务器
        fetch('/api/generate_json', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(jsonData)
        })
        .then(response => response.json())
        .then(data => {
            const resultArea = document.getElementById('resultArea');
            const resultMessage = document.getElementById('resultMessage');
            
            resultArea.style.display = 'block';
            resultMessage.textContent = data.message;
            
            // 如果有文件路径，可以添加下载链接
            if (data.file_path) {
                resultMessage.innerHTML += `<br><a href="${data.file_path}" download>下载JSON文件</a>`;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            const resultArea = document.getElementById('resultArea');
            const resultMessage = document.getElementById('resultMessage');
            
            resultArea.style.display = 'block';
            resultMessage.textContent = '生成失败: ' + error.message;
            resultMessage.className = 'alert alert-danger';
        });
    }
    
    // 添加表单元素变化监听器，但不再实时更新JSON预览
    function addFormChangeListeners() {
        const form = document.getElementById('configForm');
        if (!form) return; // 防止找不到元素
        
        const formElements = form.querySelectorAll('input, select');
        
        formElements.forEach(element => {
            element.addEventListener('change', function() {
                // 基本配置变化时不自动更新，等待用户点击保存按钮
            });
        });
    }
    
    // 调用初始化函数
    init();
    
    // 添加表单变化监听器
    addFormChangeListeners();
});